@(configForm: Form[Resource], configs: List[Resource])

@css = {
	<link rel="stylesheet" type="text/css" href="@routes.Assets.at("stylesheets/configs/add.min.css")" />
	<link rel="stylesheet" type="text/css" href="@routes.Assets.at("stylesheets/configs/list.min.css")" />
	<link rel="stylesheet" type="text/css" href="@routes.Assets.at("codemirror/codemirror.css")" />
	<link rel="stylesheet" type="text/css" href="@routes.Assets.at("codemirror/theme/eclipse.css")" />
}

@scripts = {
	<script src="@routes.Assets.at("codemirror/codemirror.js")"></script>
	<script src="@routes.Assets.at("codemirror/mode/properties/properties.js")"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			var textarea = document.getElementById('config');
			var propertiesEditor = CodeMirror.fromTextArea(textarea, {
				lineNumbers: true,
				mode: 'properties',
				theme: 'eclipse'
			});
		});
	</script>
}

@main("Add configuration", css, scripts) {
	
	<div class="resource-form-2-column">
		@helper.form(action = routes.Configurations.createConfig()) { 
			
			<div class="column">
				@helper.inputText(configForm("name"), '_label -> "Configuration name", 'size -> 50, '_help -> "A name is required")
				
				@helper.textarea(configForm("description"), '_label -> "Description", 'cols -> 50, 'rows -> 3)
			</div>
			
			<div class="column">
				@helper.textarea(configForm("config"), '_label -> "Configuration (e.g. SUT=localhost)", 'cols -> 50, 'rows -> 10)
			</div>
			
			<div class="column-wide">
				<input type="submit" value="Create configuration" />
			</div>
			
		}
		
		<div class="clear-right"></div>
	</div>
	
	@controls.list(configs)
	
}
